import { useScroll, useTransform } from "framer-motion";
import { RefObject } from "react";

export const useScrollAnimation = (containerRef: RefObject<HTMLElement>) => {
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"],
  });

  const scale = useTransform(scrollYProgress, [0, 1], [1, 1.1]);
  const opacity = useTransform(scrollYProgress, [0, 0.8, 1], [1, 1, 1]);
  const y = useTransform(scrollYProgress, [0, 1], [0, -50]);

  return {
    scrollYProgress,
    scale,
    opacity,
    y,
  };
};